<!DOCTYPE html>
  <!--[if lt IE 7]>
    <html class="lt-ie9 lt-ie8 lt-ie7" lang="en">
  <![endif]-->

  <!--[if IE 7]>
    <html class="lt-ie9 lt-ie8" lang="en">
  <![endif]-->

  <!--[if IE 8]>
    <html class="lt-ie9" lang="en">
  <![endif]-->

  <!--[if gt IE 8]>
    <!-->
    <html lang="en">
    <!--
  <![endif]-->

  <head>
    <meta charset="utf-8" />
    <title>Moon Light Admin</title>
    <meta name="author" content="Srinu Basava" />
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta name="description" content="Moon Light Admin Admin UI" />
    <meta name="keywords" content="Moon Light Admin, Admin UI, Admin Dashboard, Srinu Basava" />
    <script src="js/html5-trunk.js"></script>
    <link href="icomoon/style.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <!--[if lte IE 7]>
      <script src="css/icomoon-font/lte-ie7.js"></script>
    <![endif]-->
    <link href="css/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" />
    <link href="css/wysiwyg/wysiwyg-color.css" rel="stylesheet" />
    <link href="css/timepicker.css" rel="stylesheet" />
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-40571798-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
  <body>
    <header>
      <a href="index.html" class="logo">Moon Light Admin</a>
      <div id="mini-nav">
        <ul class="hidden-phone">
          <li><a href="timeline.html">Tasks</a></li>
          <li><a href="#">Signup's <span id="newSignup">06</span></a></li>
          <li class="dropdown">
            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
              Messages <span id="messagesCountDown">21</span>
              <b class="caret icon-white"></b>
            </a>
            <ul class="dropdown-menu pull-right">
              <li class="quick-messages">
                <img src="img/avatar-1.png" class="avatar" alt="Avatar" />
                <div class="message-date text-info">
                  <i>02 <span class="month">mins</span></i>
                </div>
                <div class="message-wrapper">
                  <h4 class="message-heading">Ubiquitous customized</h4>
                  <p class="message">
                    Enable impactful niches engage impactful 
                  </p>
                </div>
              </li>
              <li class="quick-messages">
                <img src="img/avatar-2.png" class="avatar" alt="Avatar" />
                <div class="message-date text-info">
                  <i>02 <span class="month">mins</span></i>
                </div>
                <div class="message-wrapper">
                  <h4 class="message-heading">Ubiquitous customized</h4>
                  <p class="message">
                    Enable impactful niches engage impactful 
                  </p>
                </div>
              </li>
              <li class="quick-messages">
                <img src="img/avatar-5.png" class="avatar" alt="Avatar" />
                <div class="message-date text-info">
                  <i>38 <span class="month">mins</span></i>
                </div>
                <div class="message-wrapper">
                  <h4 class="message-heading">Ubiquitous customized</h4>
                  <p class="message">
                    Enable impactful niches engage impactful 
                  </p>
                </div>
              </li>
              <li class="quick-messages">
                <img src="img/avatar-4.png" class="avatar" alt="Avatar" />
                <div class="message-date text-info">
                  <i>27 <span class="month">Apr</span></i>
                </div>
                <div class="message-wrapper">
                  <h4 class="message-heading">Ubiquitous customized</h4>
                  <p class="message">
                    Enable impactful niches engage impactful 
                  </p>
                </div>
              </li>
              <li class="quick-messages">
                <img src="img/avatar-6.png" class="avatar" alt="Avatar" />
                <div class="message-date text-info">
                  <i>18 <span class="month">Apr</span></i>
                </div>
                <div class="message-wrapper">
                  <h4 class="message-heading">Ubiquitous customized</h4>
                  <p class="message">
                    Enable impactful niches engage impactful 
                  </p>
                </div>
              </li>
            </ul>
          </li>
          <li><a href="login.html">Logout</a></li>
        </ul>
      </div>
    </header>

    <div class="container-fluid">
      <div id="mainnav" class="hidden-phone hidden-tablet">
        <ul>
          <li>
            <a href="index.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe0a1;"></span>
              </div>
              Dashboard
            </a>
          </li>
          <li>
            <a href="charts.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe097;"></span>
              </div>
              Charts
            </a>
          </li>
          <li>
            <a href="timeline.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe047;"></span>
              </div>
              Timeline
            </a>
          </li>
          <li>
            <a href="tables.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe14a;"></span>
              </div>
              Tables
            </a>
          </li>
          <li>
            <a href="forms.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe0b8;"></span>
              </div>
              Forms
            </a>
          </li>
          <li class="active">
            <span class="current-arrow"></span>
            <a href="ui-elements.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe0d2;"></span>
              </div>
              UI Elements
            </a>
          </li>
          <li>
            <a href="grid.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe14c;"></span>
              </div>
              Grid
            </a>
          </li>
          <li>
            <a href="gallery.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe00d;"></span>
              </div>
              Gallery
            </a>
          </li>
          <li>
            <a href="typography.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe100;"></span>
              </div>
              Typography
            </a>
          </li>
          <li>
            <a href="icons.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe0a9;"></span>
              </div>
              Icons
            </a>
          </li>
          <li>
            <a href="error.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe0f4;"></span>
              </div>
              404
            </a>
          </li>
          <li>
            <a href="login.html">
              <div class="icon">
                <span class="fs1" aria-hidden="true" data-icon="&#xe088;"></span>
              </div>
              Login
            </a>
          </li>
        </ul>
      </div>

      <div class="dashboard-wrapper">
        <div class="main-container">
          <div class="navbar hidden-desktop">
            <div class="navbar-inner">
              <div class="container">
                <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                  <span class="icon-bar">
                  </span>
                  <span class="icon-bar">
                  </span>
                  <span class="icon-bar">
                  </span>
                </a>
                <div class="nav-collapse collapse navbar-responsive-collapse">
                  <ul class="nav">
                    <li>
                      <a href="index.html">Dashboard</a>
                    </li>
                    <li>
                      <a href="graphs.html">Charts</a>
                    </li>
                    <li>
                      <a href="timeline.html">Timeline</a>
                    </li>
                    <li>
                      <a href="tables.html">Tables</a>
                    </li>
                    <li>
                      <a href="forms.html">Forms</a>
                    </li>
                    <li>
                      <a href="ui-elements.html">UI Elements</a>
                    </li>
                    <li>
                      <a href="grid.html">Grid</a>
                    </li>
                    <li>
                      <a href="gallery.html">Gallery</a>
                    </li>
                    <li>
                      <a href="typography.html">Typography</a>
                    </li>
                    <li>
                      <a href="icons.html">Icons</a>
                    </li>
                    <li>
                      <a href="login.html">Login</a>
                    </li>
                    <li>
                      <a href="error.html">404</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <ul class="breadcrumb-beauty">
                <li>
                  <a href="index.html"><span class="fs1" aria-hidden="true" data-icon="&#xe002;"></span> Dashboard</a>
                </li>
                <li>
                  <a href="#">UI Elements</a>
                </li>
              </ul>
            </div>
          </div>

          <br />

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe13c;"></span> Cool Buttons
                  </div>
                </div>
                <div class="widget-body">
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe1d9;"></span> 
                    <p class="no-margin">Signup's</p>
                    <div class="label label-success">29</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe1cb;"></span> 
                    <p class="no-margin">Alerts</p>
                    <div class="label label-important">32</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe1c9;"></span> 
                    <p class="no-margin">Products</p>
                    <div class="label label-info">58</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe071;"></span> 
                    <p class="no-margin">Clients</p>
                    <div class="label label-success">229</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe038;"></span> 
                    <p class="no-margin">Income</p>
                    <div class="label label-success">$88900</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0a4;"></span> 
                    <p class="no-margin">Expense</p>
                    <div class="label label-warning">$32178</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0c6;"></span> 
                    <p class="no-margin">Visits</p>
                    <div class="label label-success">8790</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0d4;"></span> 
                    <p class="no-margin">Likes</p>
                    <div class="label label-important">55639</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe15e;"></span> 
                    <p class="no-margin">Shares</p>
                    <div class="label label-success">3290</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe16d;"></span> 
                    <p class="no-margin">Tweets</p>
                    <div class="label label-warning">4990</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0d0;"></span> 
                    <p class="no-margin">Favorites</p>
                    <div class="label label-warning">28</div>
                  </a>
                  <a class="quick-action-btn span1 input-bottom-margin">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0d1;"></span> 
                    <p class="no-margin">Friends</p>
                    <div class="label label-info">355</div>
                  </a>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0b6;"></span> Cool Tabs
                  </div>
                </div>
                <div class="widget-body">
                  <ul class="nav nav-tabs no-margin myTabBeauty">
                    <li class="active">
                      <a data-toggle="tab" href="#home">
                        Traffic sources
                      </a>
                    </li>
                    <li class="">
                      <a data-toggle="tab" href="#profile">
                        Referrals
                      </a>
                    </li>
                  </ul>
                  <div class="tab-content" id="myTabContent">
                    <div id="home" class="tab-pane fade active in">
                      <p>
                        Nesciunt tofu stumptown aliqua, retro synth master cleanse. Reprehenderit butcher retro keffiyeh dreamcatcher synth terry richardsoAustin.
                      </p>
                      <p class="no-margin">
                        Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.prehenderit butcher retro keffiyeh dreamcatcher synth. Cosby Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure squid.Raw denim you probably haven't heard of them jean shorts Austin.
                      </p>
                    </div>
                    <div id="profile" class="tab-pane fade">
                      <p>
                        Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Reprehenderit butcher retro keffiyeh dreamcatcher synth terry richardsoAustin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                      </p>
                      <p>
                        Mustache cliche tempor, williamsburg carles vegan helvetica.prehenderit butcher retro keffiyeh dreamcatcher synth. Cosby Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0b6;"></span> Left Tabs
                  </div>
                </div>
                <div class="widget-body">
                  <div class="tabbable tabs-left">
                    <ul class="nav nav-tabs">
                      <li class="active"><a href="#A" data-toggle="tab">About</a></li>
                      <li><a href="#B" data-toggle="tab">Company</a></li>
                      <li><a href="#C" data-toggle="tab">Articles</a></li>
                    </ul>

                    <div class="tab-content">
                      <div class="tab-pane active" id="A">
                        <p>
                          <span class="label label-success">Friends</span> 
                          <span class="label label-info">Hobbies</span> 
                          <span class="label">Goals</span>
                        </p>
                        <p>
                          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.
                        </p>
                        <p class="no-margin"> 
                          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, Contrary to popular belief, Lorem Ipsum is not simply random text.
                        </p>
                      </div>
                      <div class="tab-pane" id="B">
                        <p><span class="label label-success">Cricket</span> <span class="label label-info">Personal</span></p>
                        <blockquote>
                          Ipsum available, but the majority have suffered alteration in some form, Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.
                        </blockquote>
                        <blockquote class="no-margin">
                          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, Contrary to popular belief literature from 45 BC.
                        </blockquote>
                      </div>
                      <div class="tab-pane" id="C">
                        <p>
                        Cosby Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p>
                        <p class="no-margin">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe14c;"></span> Buttons
                  </div>
                </div>
                <div class="widget-body">
                  <table class="table table-bordered table-striped no-margin">
                    <thead>
                      <tr>
                        <th>Button</th>
                        <th>Large Button</th>
                        <th class="hidden-phone">Small Button</th>
                        <th class="hidden-phone">Disabled Button</th>
                        <th class="hidden-phone">Button with Icon</th>
                        <th class="hidden-phone">Split Button</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td><a class="btn" href="#">Default</a></td>
                        <td><a class="btn btn-large" href="#">Default</a></td>
                        <td class="hidden-phone"><a class="btn btn-small" href="#">Default</a></td>
                        <td class="hidden-phone"><a class="btn disabled" href="#">Default</a></td>
                        <td class="hidden-phone"><a class="btn" href="#"><i class="icon-cog"></i> Default</a></td>
                        <td class="hidden-phone">
                          <div class="btn-group">
                            <a class="btn" href="#">Default</a>
                            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td><a class="btn btn-primary" href="#">Primary</a></td>
                        <td><a class="btn btn-primary btn-large" href="#">Primary</a></td>
                        <td class="hidden-phone"><a class="btn btn-primary btn-small" href="#">Primary</a></td>
                        <td class="hidden-phone"><a class="btn btn-primary disabled" href="#">Primary</a></td>
                        <td class="hidden-phone"><a class="btn btn-primary" href="#"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
                        <td class="hidden-phone">
                          <div class="btn-group">
                            <a class="btn btn-primary" href="#">Primary</a>
                            <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                            <ul class="dropdown-menu pull-right">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td><a class="btn btn-info" href="#">Info</a></td>
                        <td><a class="btn btn-info btn-large" href="#">Info</a></td>
                        <td class="hidden-phone"><a class="btn btn-info btn-small" href="#">Info</a></td>
                        <td class="hidden-phone"><a class="btn btn-info disabled" href="#">Info</a></td>
                        <td class="hidden-phone"><a class="btn btn-info" href="#"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
                        <td class="hidden-phone">
                          <div class="btn-group">
                            <a class="btn btn-info" href="#">Info</a>
                            <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                            <ul class="dropdown-menu pull-right">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td><a class="btn btn-success" href="#">Success</a></td>
                        <td><a class="btn btn-success btn-large" href="#">Success</a></td>
                        <td class="hidden-phone"><a class="btn btn-success btn-small" href="#">Success</a></td>
                        <td class="hidden-phone"><a class="btn btn-success disabled" href="#">Success</a></td>
                        <td class="hidden-phone"><a class="btn btn-success" href="#"><i class="icon-ok icon-white"></i> Success</a></td>
                        <td class="hidden-phone">
                          <div class="btn-group">
                            <a class="btn btn-success" href="#">Success</a>
                            <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                            <ul class="dropdown-menu pull-right">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td><a class="btn btn-warning" href="#">Warning</a></td>
                        <td><a class="btn btn-warning btn-large" href="#">Warning</a></td>
                        <td class="hidden-phone"><a class="btn btn-warning btn-small" href="#">Warning</a></td>
                        <td class="hidden-phone"><a class="btn btn-warning disabled" href="#">Warning</a></td>
                        <td class="hidden-phone"><a class="btn btn-warning" href="#"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
                        <td class="hidden-phone">
                          <div class="btn-group">
                            <a class="btn btn-warning" href="#">Warning</a>
                            <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                            <ul class="dropdown-menu pull-right">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td><a class="btn btn-danger" href="#">Danger</a></td>
                        <td><a class="btn btn-danger btn-large" href="#">Danger</a></td>
                        <td class="hidden-phone"><a class="btn btn-danger btn-small" href="#">Danger</a></td>
                        <td class="hidden-phone"><a class="btn btn-danger disabled" href="#">Danger</a></td>
                        <td class="hidden-phone"><a class="btn btn-danger" href="#"><i class="icon-remove icon-white"></i> Danger</a></td>
                        <td class="hidden-phone">
                          <div class="btn-group">
                            <a class="btn btn-danger" href="#">Danger</a>
                            <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                            <ul class="dropdown-menu pull-right">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td><a class="btn btn-inverse" href="#">Inverse</a></td>
                        <td><a class="btn btn-inverse btn-large" href="#">Inverse</a></td>
                        <td class="hidden-phone"><a class="btn btn-inverse btn-small" href="#">Inverse</a></td>
                        <td class="hidden-phone"><a class="btn btn-inverse disabled" href="#">Inverse</a></td>
                        <td class="hidden-phone"><a class="btn btn-inverse" href="#"><i class="icon-random icon-white"></i> Inverse</a></td>
                        <td class="hidden-phone">
                          <div class="btn-group">
                            <a class="btn btn-inverse" href="#">Inverse</a>
                            <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                            <ul class="dropdown-menu pull-right">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe1cf;"></span> 12 columns grid with a responsive
                  </div>
                </div>
                <div class="widget-body">
                  <div class="row-fluid show-grid">
                    <div class="span1">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                    <div class="span1 input-top-margin">1</div>
                  </div>
                  <div class="row-fluid show-grid">
                    <div class="span2">2</div>
                    <div class="span2 input-top-margin">2</div>
                    <div class="span2 input-top-margin">2</div>
                    <div class="span2 input-top-margin">2</div>
                    <div class="span2 input-top-margin">2</div>
                    <div class="span2 input-top-margin">2</div>
                  </div>
                  <div class="row-fluid show-grid">
                    <div class="span3">3</div>
                    <div class="span3 input-top-margin">3</div>
                    <div class="span3 input-top-margin">3</div>
                    <div class="span3 input-top-margin">3</div>
                  </div>
                  <div class="row-fluid show-grid">
                    <div class="span4">4</div>
                    <div class="span4 input-top-margin">4</div>
                    <div class="span4 input-top-margin">4</div>
                  </div>
                  <div class="row-fluid show-grid">
                    <div class="span4">4</div>
                    <div class="span8 input-top-margin">8</div>
                  </div>
                  <div class="row-fluid show-grid">
                    <div class="span3">3</div>
                    <div class="span9 input-top-margin">9</div>
                  </div>
                  <div class="row-fluid show-grid">
                    <div class="span6">6</div>
                    <div class="span6 input-top-margin">6</div>
                  </div>
                  <div class="row-fluid show-grid no-margin">
                    <div class="span12">12</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0f5;"></span> CSS Fancy Tooltips
                  </div>
                </div>
                <div class="widget-body">
                  <ul class="fancy-tooltip-wrapper">
                    <li>
                      <a class="tooltip-facebook" href="#">
                        <span>
                          Facebook
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-linkedin" href="#">
                        <span>
                          LinkedIn
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-gplus" href="#">
                        <span>
                          Google Plus
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-twitter" href="#">
                        <span>
                          Twitter
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-dribbble" href="#">
                        <span>
                          Dribbble
                        </span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0f5;"></span> CSS Fancy Tooltips
                  </div>
                </div>
                <div class="widget-body">
                  <ul class="fancy-tooltip-wrapper1">
                    <li>
                      <a class="tooltip-facebook" href="#">
                        <span>
                          Facebook
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-linkedin" href="#">
                        <span>
                          LinkedIn
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-gplus" href="#">
                        <span>
                          Google Plus
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-twitter" href="#">
                        <span>
                          Twitter
                        </span>
                      </a>
                    </li>
                    <li>
                      <a class="tooltip-dribbble" href="#">
                        <span>
                          Dribbble
                        </span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe078;"></span> Loading
                  </div>
                </div>
                <div class="widget-body">
                  <p style="margin: 15px auto">
                    <img src="img/loading-red.gif" alt="loading red" />
                    <img src="img/loading-blue.gif" alt="loading-blue" />
                    <img src="img/loading-orange.gif" alt="loading-orange" />
                    <img src="img/loading-green.gif" alt="loading-green" />
                    <img src="img/loading-black.gif" alt="loading-black" />
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0f7;"></span> Tooltips
                  </div>
                </div>
                <div class="widget-body">
                  <p>
                    Tight pants next level keffiyeh 
                    <a href="#" data-original-title="Default tooltip" style="color: #0C9ABB">
                      you probably
                    </a>
                    haven't heard of fixie sustainable quinoa 8-bit american apparel 
                    <a title="Another tooltip" href="#" style="color: #0C9ABB">
                      have a terry
                    </a>
                    richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. 
                    <a title="Another one here too" href="#" style="color: #0C9ABB">
                      whatever keytar
                    </a>
                    , scenester farm-to-table banksy Austin 
                    <a title="The last tip!" href="#" style="color: #0C9ABB">
                      twitter handle
                    </a>
                    freegan cred raw denim single-origin coffee viral.
                  </p>
                  <a data-original-title="tooltips in top" data-placement="top" class="btn btn-info">
                    Top
                  </a>
                  <a data-original-title="tooltips in right" data-placement="right" class="btn btn-success">
                    Right
                  </a>
                  <a data-original-title="tooltips in bottom" data-placement="bottom" class="btn btn-warning2">
                    Bottom
                  </a>
                  <a data-original-title="tooltips in left" data-placement="left" class="btn btn-warning">
                    Left
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0f7;"></span> Popover
                  </div>
                </div>
                <div class="widget-body">
                  <p>
                    Tight pants next level keffiyeh 
                    <span data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" class="popover-pop" data-original-title="Popover on top" style="color: #0C9ABB; cursor: pointer">
                      you probably
                    </span>
                    haven't heard of fixie sustainable quinoa 8-bit american apparel 
                    <span data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="right" class="popover-pop" data-original-title="Popover on right" style="color: #0C9ABB; cursor: pointer">
                      have a terry
                    </span>
                    richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. 
                    <span data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="bottom" class="popover-pop" data-original-title="Popover on bottom" style="color: #0C9ABB; cursor: pointer">
                      whatever keytar
                    </span>
                    , scenester farm-to-table banksy Austin 
                    <span data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" class="popover-pop" data-original-title="Popover on left" style="color: #0C9ABB; cursor: pointer">
                      twitter handle
                    </span>
                    freegan cred raw denim single-origin coffee viral.
                  </p>
                  <button data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" class="btn btn-info popover-pop" data-original-title="Popover on top">
                    Top
                  </button>
                  <button data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="right" class="btn btn-success popover-pop" data-original-title="Popover on right">
                    Right
                  </button>
                  <button data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="bottom" class="btn btn-warning2 popover-pop" data-original-title="Popover on bottom">
                    Bottom
                  </button>
                  <button data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" class="btn btn-warning popover-pop" data-original-title="Popover on left">
                    Left
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe14c;"></span> Accordion
                  </div>
                </div>
                <div class="widget-body">
                  <div id="accordion1" class="accordion no-margin">
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a href="#collapseOne" data-parent="#accordion1" data-toggle="collapse" class="accordion-toggle">
                          <i class="icon-user"></i>
                          About me :)
                        </a>
                      </div>
                      <div class="accordion-body in collapse" id="collapseOne" style="height: auto;">
                        <div class="accordion-inner">
                          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
                        </div>
                      </div>
                    </div>
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a href="#collapseTwo" data-parent="#accordion1" data-toggle="collapse" class="accordion-toggle">
                          <i class="icon-th"></i>
                          Portfolio
                        </a>
                      </div>
                      <div class="accordion-body collapse" id="collapseTwo" style="height: 0px;">
                        <div class="accordion-inner">
                          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
                        </div>
                      </div>
                    </div>
                    <div class="accordion-group">
                      <div class="accordion-heading">
                        <a href="#collapseThree" data-parent="#accordion1" data-toggle="collapse" class="accordion-toggle">
                          <i class="icon-envelope"></i>
                          Contact me
                        </a>
                      </div>
                      <div class="accordion-body collapse" id="collapseThree" style="height: 0px;">
                        <div class="accordion-inner">
                          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">  
            <div class="span2">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0b6;"></span> Modal
                  </div>
                </div>
                <div class="widget-body">
                  <a href="#createFilter" role="button" class="btn btn-large btn-warning2 btn-block" data-toggle="modal">
                    Create
                  </a>

                  <!-- Modal -->
                  <div id="createFilter" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="createFilterLabel" aria-hidden="true">
                    <div class="modal-header">
                      <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                      </button> -->
                      <h4 id="createFilterLabel">Create</h4>
                    </div>
                    <div class="modal-body">
                      <div class="row-fluid">
                        <div class="span12">
                          <form class="form-horizontal  no-margin" />
                            <div class="control-group">
                              <label class="control-label" for="inputName">Name</label>
                              <div class="controls">
                                <input type="text" id="inputName" placeholder="Name" />
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label" for="inputEmail">Responses</label>
                              <div class="controls">
                                <label class="radio inline">
                                  <input type="radio" id="inlineradio1" value="option1" name="optionsRadios" checked="" /> Option 1
                                </label>
                                <label class="radio inline">
                                  <input type="radio" id="inlineradio2" value="option2" name="optionsRadios" /> Option 2
                                </label>
                                <label class="radio inline">
                                  <input type="radio" id="inlineradio3" value="option3" name="optionsRadios" /> Option 3
                                </label>
                              </div>
                            </div>
                            <div class="control-group">
                              <div class="controls">
                                <input type="text" id="inputEmail" placeholder="Enter emails ..." />
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button class="btn" data-dismiss="modal" aria-hidden="true">
                        Close
                      </button>
                      <button class="btn btn-primary">
                        Create
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="span2">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0b6;"></span> Modal
                  </div>
                </div>
                <div class="widget-body">
                  <a href="#shareFilter" role="button" class="btn btn-large btn-warning btn-block" data-toggle="modal">
                    Share
                  </a>

                  <!-- Modal -->
                  <div id="shareFilter" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="shareFilterLabel" aria-hidden="true">
                    <div class="modal-header">
                      <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                      </button> -->
                      <h4 id="shareFilterLabel">Share</h4>
                    </div>
                    <div class="modal-body">
                      <div class="row-fluid">
                        <div class="span12">
                          <form class="form-horizontal  no-margin" />
                            <div class="control-group">
                              <label class="control-label">About Something</label>
                              <div class="controls">
                                <textarea placeholder="Tell your people about filter..." rows="2">

                                </textarea>
                              </div>
                            </div>
                            <div class="control-group">
                              <label class="control-label" for="inlineradio4">Select</label>
                              <div class="controls">
                                <label class="radio inline">
                                  <input type="radio" id="inlineradio4" value="option1" name="optionsRadios" checked="" /> Facebook
                                </label>
                                <label class="radio inline">
                                  <input type="radio" id="inlineradio5" value="option2" name="optionsRadios" /> Twitter
                                </label>
                                <label class="radio inline">
                                  <input type="radio" id="inlineradio6" value="option3" name="optionsRadios" /> Email
                                </label>
                              </div>
                            </div>
                            <div class="control-group">
                              <div class="controls">
                                <input type="text" id="enterEmail" placeholder="Enter emails seperated by ," />
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button class="btn" data-dismiss="modal" aria-hidden="true">
                        Close
                      </button>
                      <button class="btn btn-primary">
                        Share
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0b6;"></span> Modal 
                  </div>
                </div>
                <div class="widget-body">
                  <a href="#accSettings" role="button" class="btn btn-large btn-success btn-block" data-toggle="modal">
                    Account Settings
                  </a>

                  <!-- Modal -->
                  <div id="accSettings" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                      </button>
                      <h4 id="myModalLabel1">
                        Account Settings
                      </h4>
                    </div>
                    <div class="modal-body">
                      <div class="row-fluid">  
                        <div class="span4">
                          <input type="text" class="span12" placeholder="Frist name" />
                        </div>
                        <div class="span4">
                          <input type="text" class="span12" placeholder="Last name" />
                        </div>
                        <div class="span4">
                          <input type="text" class="span12" placeholder="email" />
                        </div>
                      </div>
                      
                    </div>
                    <div class="modal-footer">
                      <button class="btn" data-dismiss="modal" aria-hidden="true">
                        Close
                      </button>
                      <button class="btn btn-primary">
                        Save changes
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0b6;"></span> Modal Wizard
                  </div>
                </div>
                <div class="widget-body">
                  <a href="#advanced" role="button" data-toggle="modal" class="btn btn-large btn-info btn-block">Advanced Modal</a>

                  <!-- Advanced Modal -->
                  <div id="advanced" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      <ul class="nav nav-pills pull-right">
                        <li class="active">
                          <a href="#date" data-toggle="pill">Date</a>
                        </li>
                        <li><a href="#relevance" data-toggle="pill">Relevance</a></li>
                        <li><a href="#dealership" data-toggle="pill">Dealership</a></li>
                      </ul>
                      <h4>Advanced Sort</h4>  
                    </div>
                    <div class="modal-body">
                      <div class="row-fluid">
                        <div class="tab-content">
                          <div class="tab-pane active" id="date">
                            <form />
                              <div class="controls controls-row">
                                <select>
                                  <option />Date
                                  <option />Today
                                  <option />Yesterday
                                  <option />Last Week
                                  <option />Last Month
                                </select>
                              </div>
                              <button type="submit" class="btn btn-warning">Sort</button>
                            </form>
                          </div>
                          <div class="tab-pane" id="relevance">
                            <form />
                              <fieldset>
                                <div class="controls controls-row">
                                  <select class="span6">
                                    <option value="" />Relevance Factor
                                    <option value="" />Containing
                                    <option value="" />Starting with
                                    <option value="" />Enging with
                                  </select>
                                  <select class="span6">
                                    <option value="" />Sorting
                                    <option value="" />Relevant on top
                                    <option value="" />Relevant on bottom
                                  </select>
                                </div>
                                <button type="submit" class="btn btn-warning">Sort</button>
                              </fieldset>
                            </form>
                          </div>
                          <div class="tab-pane" id="dealership">
                            <form />
                              <fieldset>
                                <div class="controls controls-row">
                                  <input type="text" class="span8" placeholder="Location" />
                                  <select class="span4">
                                    <option />City
                                    <option />Los Angeles
                                    <option />Tokyo
                                    <option />New York
                                    <option />London
                                  </select>
                                </div>
                                <button type="submit" class="btn btn-warning">Sort</button>
                              </fieldset>
                            </form>
                          </div>
                        </div>          
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe14c;"></span> Navbars
                  </div>
                </div>
                <div class="widget-body">
                  <div class="navbar">
                    <div class="navbar-inner">
                      <div class="container">
                        <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
                          <span class="icon-bar">
                          </span>
                          <span class="icon-bar">
                          </span>
                          <span class="icon-bar">
                          </span>
                        </a>
                        <a href="#" class="brand">
                          Title
                        </a>
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                          <ul class="nav">
                            <li class="active">
                              <a href="#">
                                Home
                              </a>
                            </li>
                            <li>
                              <a href="#">
                                Link
                              </a>
                            </li>
                            <li class="dropdown">
                              <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                Dropdown 
                                <b class="caret">
                                </b>
                              </a>
                              <ul class="dropdown-menu">
                                <li>
                                  <a href="#">
                                    Action
                                  </a>
                                </li>
                                <li>
                                  <a href="#">
                                    Another action
                                  </a>
                                </li>
                                <li>
                                  <a href="#">
                                    Something else here
                                  </a>
                                </li>
                                <li>
                                  <a href="#">
                                    Separated link
                                  </a>
                                </li>
                                <li>
                                  <a href="#">
                                    One more separated link
                                  </a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                          <form class="navbar-search pull-left" />
                            <input type="text" placeholder="Search" class="search-query input-large" />
                          </form>
                          <ul class="nav pull-right">
                            <li>
                              <a href="#">
                                Link
                              </a>
                            </li>
                            <li class="divider-vertical">
                            </li>
                            <li class="dropdown">
                              <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                Dropdown 
                                <b class="caret">
                                </b>
                              </a>
                              <ul class="dropdown-menu">
                                <li>
                                  <a href="#">
                                    Action
                                  </a>
                                </li>
                                <li>
                                  <a href="#">
                                    Another action
                                  </a>
                                </li>
                                <li>
                                  <a href="#">
                                    Something else here
                                  </a>
                                </li>
                                <li>
                                  <a href="#">
                                    Separated link
                                  </a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="navbar navbar-static" id="navbar-example">
                    <div class="navbar-inner">
                      <div style="width: auto;" class="container">
                        <a href="#" class="brand">
                          Project Name
                        </a>
                        <ul class="nav">
                          <li class="dropdown">
                            <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">
                              Dropdown 
                              <b class="caret">
                              </b>
                            </a>
                            <ul class="dropdown-menu">
                              <li>
                                <a href="http://google.com" tabindex="-1">
                                  Action
                                </a>
                              </li>
                              <li>
                                <a href="#anotherAction" tabindex="-1">
                                  Another action
                                </a>
                              </li>
                              <li>
                                <a href="#" tabindex="-1">
                                  Something else here
                                </a>
                              </li>
                              <li>
                                <a href="#" tabindex="-1">
                                  Separated link
                                </a>
                              </li>
                            </ul>
                          </li>
                          <li class="dropdown">
                            <a data-toggle="dropdown" class="dropdown-toggle" role="button" id="drop2" href="#">
                              Dropdown 2 
                              <b class="caret">
                              </b>
                            </a>
                            <ul class="dropdown-menu">
                              <li>
                                <a href="#" tabindex="-1">
                                  Action
                                </a>
                              </li>
                              <li>
                                <a href="#" tabindex="-1">
                                  Another action
                                </a>
                              </li>
                              <li>
                                <a href="#" tabindex="-1">
                                  Something else here
                                </a>
                              </li>
                              <li>
                                <a href="#" tabindex="-1">
                                  Separated link
                                </a>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>

                  <div class="navbar no-margin">
                    <div class="navbar-inner">
                      <form class="navbar-form" />
                        <div class="input-append">
                          <input class="span2" id="appendedInputButtons" type="text" />
                          <button class="btn hidden-phone" type="button">
                            Search
                          </button>
                          <button class="btn btn-info" type="submit">
                            Submit
                          </button>
                        </div>
                      </form>
                    </div>
                  </div>

                </div>
              </div>
            </div>

          </div>


          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe1cb;"></span> Notifications
                  </div>
                </div>
                <div class="widget-body">

                  <div class="alert alert-block alert-error fade in">
                    <button data-dismiss="alert" class="close" type="button">
                      ×
                    </button>
                    <h4 class="alert-heading">
                      Error!
                    </h4>
                    <p>
                      Methodologies eyeballs incentivize models. Platforms web-enabled cultivate dynamic synergies: technologies content
                    </p>
                  </div>
                  <div class="alert alert-block alert-warning fade in">
                    <button data-dismiss="alert" class="close" type="button">
                      ×
                    </button>
                    <h4 class="alert-heading">
                      Warning!
                    </h4>
                    <p>
                      Methodologies eyeballs incentivize models. Platforms web-enabled cultivate dynamic synergies: technologies content deploy ROI communities
                    </p>
                  </div>
                  <div class="alert alert-block alert-success fade in">
                    <button data-dismiss="alert" class="close" type="button">
                      ×
                    </button>
                    <h4 class="alert-heading">
                      Success!
                    </h4>
                    <p>
                      Methodologies eyeballs incentivize models. Platforms web-enabled cultivate dynamic synergies: technologies deploy communities methodologies sticky
                    </p>
                  </div>

                  <div class="alert alert-block alert-info fade in no-margin">
                    <button data-dismiss="alert" class="close" type="button">
                      ×
                    </button>
                    <h4 class="alert-heading">
                      Info!
                    </h4>
                    <p>
                      Eyeballs incentivize models. Platforms web-enabled cultivate dynamic synergies: technologies content deploy ROI communities methodologies sticky
                    </p>
                  </div>

                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe0b6;"></span> Pagination
                  </div>
                </div>
                <div class="widget-body">
                  <div class="pagination no-margin">
                    <ul>
                      <li class="disabled">
                        <a href="#">
                          Prev
                        </a>
                      </li>
                      <li class="active">
                        <a href="#">
                          1
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          2
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          3
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          4
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          5
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          6
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          7
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          8
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          9
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          10
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          11
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          12
                        </a>
                      </li>
                      <li class="hidden-phone">
                        <a href="#">
                          Next
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe08c;"></span> Progress bars - Basic
                  </div>
                </div>
                <div class="widget-body">
                  <div class="progress progress-info">
                    <div class="bar" style="width: 20%">
                    </div>
                  </div>
                  <div class="progress progress-success">
                    <div class="bar" style="width: 40%">
                    </div>
                  </div>
                  <div class="progress progress-warning">
                    <div class="bar" style="width: 60%">
                    </div>
                  </div>
                  <div class="progress progress-danger">
                    <div class="bar" style="width: 80%">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe08c;"></span> Progress bars - Striped
                  </div>
                </div>
                <div class="widget-body">
                  <div class="progress progress-info progress-striped">
                    <div class="bar" style="width: 20%">
                    </div>
                  </div>
                  <div class="progress progress-success progress-striped">
                    <div class="bar" style="width: 40%">
                    </div>
                  </div>
                  <div class="progress progress-warning progress-striped">
                    <div class="bar" style="width: 60%">
                    </div>
                  </div>
                  <div class="progress progress-danger progress-striped">
                    <div class="bar" style="width: 80%">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="span4">
              <div class="widget">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe08c;"></span> Progress bars - Animated
                  </div>
                </div>
                <div class="widget-body">
                  <div class="progress progress-info progress-striped active">
                    <div class="bar" style="width: 20%">
                    </div>
                  </div>
                  <div class="progress progress-success progress-striped active">
                    <div class="bar" style="width: 40%">
                    </div>
                  </div>
                  <div class="progress progress-warning progress-striped active">
                    <div class="bar" style="width: 60%">
                    </div>
                  </div>
                  <div class="progress progress-danger progress-striped active">
                    <div class="bar" style="width: 80%">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              <div class="widget no-margin">
                <div class="widget-header">
                  <div class="title">
                    <span class="fs1" aria-hidden="true" data-icon="&#xe14c;"></span> Labels and badges
                  </div>
                </div>
                <div class="widget-body">
                  <span class="label input-bottom-margin">
                    Default
                  </span>
                  <span class="label label-success input-bottom-margin">
                    Success
                  </span>
                  <span class="label label-warning input-bottom-margin">
                    Warning
                  </span>
                  <span class="label label-important input-bottom-margin">
                    Important
                  </span>
                  <span class="label label-info input-bottom-margin">
                    Info
                  </span>
                  <span class="label label-inverse input-bottom-margin">
                    Inverse
                  </span>

                  <span class="badge input-bottom-margin">
                    Default
                  </span>
                  <span class="badge badge-success input-bottom-margin">
                    Success
                  </span>
                  <span class="badge badge-warning input-bottom-margin">
                    Warning
                  </span>
                  <span class="badge badge-important input-bottom-margin">
                    Important
                  </span>
                  <span class="badge badge-info input-bottom-margin">
                    Info
                  </span>
                  <span class="badge badge-inverse input-bottom-margin">
                    Inverse
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <p class="copyright">&copy; Moon Light Admin 2013</p>
    </footer>
    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>

    <!-- custom Js -->
    <script src="js/custom.js"></script>
    
  </body>
</html>